"use client"
import { SaveOutlined } from '@ant-design/icons';
import { Card, Form, Input, Flex, Descriptions, Avatar, Tabs, Button, Select, Radio } from 'antd'
import React from 'react'


export default function Profile() {
    const user = JSON.parse(localStorage.getItem("user") || "{}");
    return (
        <Flex style={{ width: '100%' }} gap={20}>
            <Card title='个人信息' style={{ width: '300px' }}>
                <Descriptions column={1} labelStyle={{width: '60px'}}>
                    <Descriptions.Item label='用户名'>
                        <span>{user.user_name}</span>
                    </Descriptions.Item>
                    <Descriptions.Item label='邮箱'>
                        <span>{user.email}</span>
                    </Descriptions.Item>
                    <Descriptions.Item label='手机号'>
                        <span>{user.phonenumber}</span>
                    </Descriptions.Item>
                </Descriptions>
            </Card>
            <Card title='基本信息' style={{ flex: 1 }}>
                <Tabs>
                    <Tabs.TabPane tab='基本信息' key='1'>
                        <Form layout='horizontal' labelCol={{ span: 4 }}>
                            <Form.Item label='用户昵称' name='nick_name'>
                                <Input />
                            </Form.Item>
                            <Form.Item label='邮箱' name='email'>
                                <Input />
                            </Form.Item>
                            <Form.Item label='手机号' name='phonenumber'>
                                <Input />
                            </Form.Item>
                            <Form.Item label='性别' name='sex'>
                                <Radio.Group>
                                    <Radio value={1}>男</Radio>
                                    <Radio value={0}>女</Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item style={{ textAlign: 'right' }}>
                                <Button type='primary' icon={<SaveOutlined />} htmlType='submit'>保存</Button>
                            </Form.Item>
                        </Form>
                    </Tabs.TabPane>
                    <Tabs.TabPane tab='安全设置' key='2'>
                        <Form layout='horizontal' labelCol={{ span: 4 }}>
                            <Form.Item label='旧密码' name='old_password'>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item label='密码' name='password'>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item label='确认密码' name='confirm_password'>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item style={{ textAlign: 'right' }}>
                                <Button type='primary' icon={<SaveOutlined />} htmlType='submit'>保存</Button>
                            </Form.Item>
                        </Form>
                    </Tabs.TabPane>
                </Tabs>
            </Card>
        </Flex>
    )
}